<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="container">
      <h1>标签页会话管理器</h1>

      <div class="section save-section">
        <h2 style="display: inline-block">保存当前会话</h2>
        <div id="save-status" class="status"></div>
        <div class="input-group">
          <input type="text" id="session-name" placeholder="会话名称（可选）" />
          <button id="save-session">保存当前标签页</button>
        </div>
      </div>

      <div class="section sessions-section">
        <div class="settings-section">
          <h2>已保存的会话</h2>
          <div class="setting-item">
            <label class="switch">
              <input type="checkbox" id="confirm-delete" checked />
              <span class="slider"></span>
            </label>
            <span class="setting-label">删除会话时确认</span>
          </div>
        </div>
        <div id="sessions-list" class="sessions-list">
          <div class="empty-message">没有保存的会话</div>
        </div>
      </div>
    </div>

    <template id="session-template">
      <div class="session-item">
        <div class="session-info">
          <h3 class="session-name"></h3>
          <div class="session-meta">
            <span class="session-date"></span>
            <span class="session-tabs-count"></span>
          </div>
        </div>
        <div class="session-actions">
          <button class="restore-btn">恢复</button>
          <button class="edit-btn">编辑</button>
          <button class="delete-btn">删除</button>
        </div>
      </div>
    </template>

    <!-- 自定义确认对话框 -->
    <div id="confirm-dialog" class="dialog-overlay hidden">
      <div class="dialog-container">
        <div class="dialog-header">
          <h3>确认删除</h3>
        </div>
        <div class="dialog-content">
          <p>确定要删除这个会话吗？此操作无法撤销。</p>
        </div>
        <div class="dialog-actions">
          <button id="dialog-cancel" class="dialog-btn cancel-btn">取消</button>
          <button id="dialog-confirm" class="dialog-btn confirm-btn">
            删除
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑会话对话框 -->
    <div id="edit-dialog" class="dialog-overlay hidden">
      <div class="dialog-container">
        <div class="dialog-header">
          <h3>编辑会话</h3>
        </div>
        <div class="dialog-content">
          <div class="edit-form">
            <div class="form-group edit-name-group">
              <label for="edit-session-name">会话名称:</label>
              <input
                type="text"
                id="edit-session-name"
                placeholder="会话名称" />
            </div>
            <div class="form-group">
              <h4>标签页列表</h4>
              <div id="edit-tabs-list" class="edit-tabs-list"></div>
            </div>
          </div>
        </div>
        <div class="dialog-actions">
          <button id="edit-cancel" class="dialog-btn cancel-btn">取消</button>
          <button id="edit-confirm" class="dialog-btn confirm-btn">保存</button>
        </div>
      </div>
    </div>

    <script src="popup.js"></script>
  </body>
</html>
